<template>
    <div>
        <div class="form_div">
            <el-tabs type="border-card" style="width: 100%; padding: 0px">
                <el-tab-pane
                    label="我的信息"
                    style="padding: 1em; background-color: white"
                >
                    <div class="box">
                        <div class="box_content">
                            <el-form ref="form" :model="form" class="ps_form">
                                <div style="display: flex; margin-top: 20px">
                                    <el-form-item
                                        label="用户账号:"
                                        prop="username"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.username"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                        label="用户名称:"
                                        prop="nickname"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.nickname"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div style="display: flex; margin-top: 20px">
                                    <el-form-item
                                        label="性别:"
                                        prop="sex"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.sex"
                                            style="width: 80%"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                        label="类型:"
                                        prop="type"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            value="管理员"
                                            v-if="form.type === 1"
                                            style="width: 80%"
                                            disabled
                                        ></el-input>
                                        <el-input
                                            size="medium"
                                            value="普通用户"
                                            v-else
                                            style="width: 80%"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div style="display: flex; margin-top: 20px">
                                    <el-form-item
                                        label="联系电话:"
                                        prop="phone"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.phone"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                        label="邮箱:"
                                        prop="email"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.email"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div style="display: flex; margin-top: 20px">
                                    <el-form-item
                                        label="生效时间:"
                                        prop="createtime"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            :value="
                                                form.createtime.substring(0, 10)
                                            "
                                            style="width: 80%"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                        label="详细住址:"
                                        prop="homeaddress"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.homeaddress"
                                            style="width: 80%"
                                            disabled
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div style="display: flex; margin-top: 20px">
                                    <el-form-item
                                        label="我的车位:"
                                        prop="parkname"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="form.parkname"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                        label="计费状态:"
                                        prop="parkstatus"
                                        label-width="80px"
                                        style="flex: 1"
                                    >
                                        <el-input
                                            size="medium"
                                            v-if="form.parkstatus === 1"
                                            value="已缴费"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                        <el-input
                                            size="medium"
                                            v-else
                                            value="未缴费"
                                            style="width: 80%"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="form_div" style="margin: 20px">头像信息/更换</div>
        <div>
            <el-card shadow="always">
                <el-upload
                    class="avatar-uploader"
                    :action="UrlImg"
                    :show-file-list="true"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "pwdChange",
    data() {
        return {
            imageUrl: "",
            form: {},
            token: "",
        };
    },
    created() {
        this.getList();
        this.token = sessionStorage.getItem("token");
        this.UrlImg = `http://community.byesame.com/users/updateIcon?token=${this.token}`;
    },
    methods: {
        getList() {
            this.$axiosToken({
                url: "/users/getMyId",
                method: "post",
                data: this.form,
                success: (result) => {
                    console.log(result, "result");
                    this.form = result[0];
                    this.imageUrl =
                        "http://community.byesame.com/file/" + result[0].icon;
                },
            });
        },
        handleAvatarSuccess(res, file) {
            console.log(this.imageUrl);
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(this.imageUrl);
            this.$message.success("更新成功，请重新登录");
        },
        beforeAvatarUpload(file) {
            console.log(file);
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

<style scoped>
.form_div {
    width: 99%;
    margin: auto;
}

.box_content {
    padding: 20px 0;
    padding-left: 50px;
}

.button {
    width: 120px;
}

span {
    margin-left: 20px;
    font-size: 12px;
    color: #253af9;
    cursor: pointer;
    font-style: oblique;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>